<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>套餐列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
	<link rel="stylesheet" href="/css/combo/index.css">
	<style>
		.container .left .l-header ul li input{
			width: 100px;
			text-indent:0;
		}
		.layui-form-select .layui-edge{
			top:25px;
		}
	</style>
</head>
<body class="childrenBody">
<div class="container">
	<div class="left">
		<div class="l-header">
			<form class="layui-form">
				<ul>
					<li class="l-first">
						<div class="layui-inline">
							<label class="layui-form-label">会员</label>
							<div class="layui-input-block">
								<select name="type" style="width: 20px;">
									<option value="">--请选择--</option>
									<option value="1">否</option>
									<option value="2">是</option>
								</select>
							</div>
						</div>
					</li>
					<li class="l-last">
						<input type="text" placeholder="手机号" name="phone" style="width:150px;">
						<!--<input type="text" placeholder="姓名" name="name">-->
						<a class="layui-btn search_btn" lay-submit="" lay-filter="queryMember" style="background: #fff;color:#5785db;border:1px solid #5785db;">查询</a>
					</li>
				</ul>
			</form>
		</div>
		<div class="left-table">
			<table class="layui-hide" id="listInfo" lay-filter="demo"></table>
		</div>
	</div>
	<div class="right">
		<div class="l-header">已选择客户</div>
		<div class="right-table">
			<table class="layui-table" id="test" lay-filter="demo">

			</table>
		</div>
		<div class="r-footer">
			<p>已选择<em class="number">0</em>个客户</p>
			<span class="s-btn" id="sendnow">立即发送</span>
		</div>
	</div>
</div>
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/plugins/layui/layui.all.js"></script>
<script type="text/javascript" src="/js/user/newsList.js"></script>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon"></i>删除</a>
</script>
<script type="text/javascript">
    var tableData = [];
    var copyTableData = [];
    layui.config({
        base: '/js/admin/'
    }).extend({
        ajaxExtention: 'ajaxExtention',//加载自定义扩展，每个业务js都需要加载这个ajax扩展
        $tool: 'tool'
    }).use(['table','$tool','form'], function(){
        var table = layui.table,
            form=layui.form,
            $tool = layui.$tool;
        var queryArgs = $tool.getQueryParam();//获取查询参数
        var masterId = queryArgs['id'];
        getDatas();
        function getDatas() {
            $.ajax({
                type : "GET",
                url: '/storeMember/getAllStoreMembersByCondition',
                data:{type:"",phone:""},
                dataType:'json',
                async:false,
                success: function(data){
                    var list=data.data;
                    for(var i=0;i<list.length;i++){
                        var obj=new Object();
                        obj.id=list[i].id;
                        obj.name=list[i].name;
                        obj.phone=list[i].phone;
                        tableData.push(obj);
                    }
                }
            });
        }

        var tableIns= table.render({
            elem: '#listInfo'
            ,data: tableData
            ,cols: [[
                {type:'checkbox'}
                ,{field:'id', title: '会员ID'}
                ,{field:'name', title: '姓名'}
                ,{field:'phone',title: '手机号码'}
            ]]
            ,page: true
        });
        function inTableData (id) {
            console.log(copyTableData);
            for(var i in copyTableData){
                if(copyTableData[i].id ==id){
                    return true;
                }
            }
            return false;
        }

        function getIndexInData (id) {
            for(var i in tableData){
                if(tableData[i].id ==id){
                    return i;
                }
            }
        }
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            if(obj.checked){
                if(obj.type ==="all"){
                    copyTableData=[];
                    for(var i in tableData){
                        tableData[i].LAY_CHECKED=true;
                        copyTableData.push(tableData[i])
                    }
                }else{
                    if(inTableData(obj.data.id)){
                        layer.msg("已经存在选中列表");
                        return;
                    }else{
                        tableData[getIndexInData(obj.data.id)].LAY_CHECKED=true;
                        copyTableData.push(obj.data)
                    }
                }
            }else{
                if(obj.type ==="all"){
                    for(var i in tableData){
                        tableData[i].LAY_CHECKED=false;
                        copyTableData.splice(copyTableData[i],1);
                    }
                }else{
                    console.log(obj.data.id);
                    for(var i in copyTableData){
                        if(copyTableData[i].id ==obj.data.id){
                            tableData[getIndexInData(obj.data.id)].LAY_CHECKED=false;
                            copyTableData.splice(i,1);
                        }
                    }
                }
            }
            $(".r-footer .number").html(copyTableData.length);
            console.log(copyTableData.length);
            table.reload('test',{
                data : copyTableData
            });
        });
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.render({
            elem: '#test'
            ,data:copyTableData
            ,cols: [[
                {field:'id',  title: '会员',width:'20%'}
                ,{field:'name', title: '姓名',width:'25%'}
                ,{field:'phone', title: '手机号码',width:'25%'}
                , {title: '操作', align: 'center', toolbar: '#barDemo',width:'30%'}
            ]]
            ,page: false
            ,limit:100
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                for(var i in copyTableData){
                    if(copyTableData[i].id ==obj.data.id){
                        copyTableData.splice(i,1);

                        tableData[getIndexInData(obj.data.id)].LAY_CHECKED=false;
                    }
                }
                $(".r-footer .number").html(copyTableData.length);
                console.log(copyTableData);
                table.reload('listInfo',{
                    data : tableData
                });
                table.reload('test',{
                    data : copyTableData
                });
            }
        });

        form.on("submit(queryMember)", function (data) {
            var type = data.field.type;
            var phone = data.field.phone;
            // var name = data.field.name;
            //表格重新加载
            $.ajax({
                url:"/storeMember/getAllStoreMembersByCondition",
                method:"GET",
                data:{type:type,phone:phone},
                success:function (data) {
                    var list=data.data;
                    tableData = [];
                    for(var i=0;i<list.length;i++) {
                        var obj = new Object();
                        obj.id = list[i].id;
                        obj.name = list[i].name;
                        obj.phone = list[i].phone;
                        if(inTableData(obj.id)){
                            obj.LAY_CHECKED=true;
                        }
                        tableData.push(obj);
                    }
                    console.log(tableData);
                    table.reload('listInfo',{
                        data : tableData
                    });
                }
            });

            return false;
        });

        $("#sendnow").click(function () {
            if(copyTableData.length==0){
                layer.msg('请选择需要发券的客户');
                return;
            }
            var obj={};
            var customerIdList=[];
            for(var i=0;i<copyTableData.length;i++){
                customerIdList.push(copyTableData[i].id);
            }
            obj.masterId=masterId;
            obj.customerIdList=customerIdList;
            var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});

            $.ajax({
                type : "POST",
                url: '/voucherRepositorys/batchSend',
                data:JSON.stringify(obj),
                contentType : 'application/json',
                success: function(data){
                    if(data.code==2000){
                        layer.msg("批量发送成功");
                        top.layer.close(index);
                        layer.closeAll("iframe");
                       // parent.tableIns.reload();
                    }else {
                        top.layer.close(index);
                        layer.msg(data.msg);
                    }
                }
            });
            console.log(copyTableData);

        })
    });





</script>
</body>
</html>